<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <ul id="ul">
    <li>西施</li>
    <li>貂蝉</li>
    <li>昭君</li>
    <li>凤姐</li>
    <li>芙蓉姐姐</li>
  </ul>
  <input type="text" id="girl">
  <input type="button" value="添加" id="btn" />
  <script>
    /*     页面上有一些美女列表，当单击li时背景色变为红色，
        但点击按钮时会新增1个美女到列表最前面，
        并且单击新增的美女背景也会变为红色 */

    // 获取元素
    const ul = document.querySelector('#ul');
    const girl = document.querySelector('#girl');
    const btn = document.querySelector('#btn');

    // 添加事件
    btn.onclick = function() {
      // 为空提示
      if (girl.value.length == 0) 
        return alert('请输入美女');
      
      // 创建元素
      let li = document.createElement('li');
      ul.insertBefore(li, ul.children[0])
      // 填充内容
      li.innerHTML = girl.value;
    }

    // 事件监听
    ul.addEventListener('click', function(e) {
      if (e.target.nodeName == 'LI') {
        e.target.style.backgroundColor = 'red';
      }
    });
  </script>
</body>

</html>